﻿@using Covenant.Models.Listeners
@model HttpListener
@{
    Layout = "_ListenerLayout";
    ViewData["Title"] = "HTTP Listener";
    IEnumerable<HttpProfile> Profiles = ViewBag.Profiles;
}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
    <h1 class="h2">Create @ViewBag.ListenerType.Name Listener</h1>
</div>

<form id="submit-listener-form" asp-action="Create">
    <div asp-validation-summary="All" class="text-danger"></div>
    <input asp-for="Id" value="@Model.Id" type="hidden">
    <input asp-for="GUID" value="@Model.GUID" type="hidden">
    <input asp-for="ListenerTypeId" value="@Model.ListenerTypeId" type="hidden">
    <input asp-for="Status" value="Active" type="hidden">
    <input asp-for="CovenantToken" value="@Model.CovenantToken" type="hidden">
    <div class="form-group">
        <label asp-for="Description"></label>
        <input asp-for="Description" value="@Model.Description" class="form-control-plaintext" readonly>
    </div>
    <div class="form-group">
        <label asp-for="Name"></label>
        <input asp-for="Name" value="@Model.Name" class="form-control">
    </div>
    <div class="form-row">
        <div class="form-group col-md-4">
            <label asp-for="BindAddress"></label>
            <input asp-for="BindAddress" value="@Model.BindAddress" class="form-control">
        </div>
        <div class="form-group col-md-4">
            <label asp-for="BindPort"></label>
            <input asp-for="BindPort" value="@Model.BindPort" class="form-control">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-3">
            <label asp-for="ConnectPort"></label>
            <input asp-for="ConnectPort" value="@Model.ConnectPort" class="form-control">
        </div>
    </div>
    <div class="d-flex flex-row address-row">
        <div class="form-group col-md-4 pl-0 mt-1 mb-1">
            <label asp-for="ConnectAddresses[0]">ConnectAddress</label>
            <input asp-for="ConnectAddresses[0]" value="@Model.ConnectAddresses[0]" class="form-control address">
        </div>
        <div class="form-group col-md-4 pl-0 mt-1 mb-1">
            <label asp-for="Urls[0]">Url</label>
            <input asp-for="Urls[0]" value="@Model.Urls[0]" class="form-control" readonly>
        </div>
    </div>
    @for (int i = 1; i < Model.ConnectAddresses.Count; i++)
    {
        <div class="d-flex flex-row address-row">
            <div class="form-group col-md-4 pl-0 mt-1 mb-1">
                <input asp-for="ConnectAddresses[i]" value="@Model.ConnectAddresses[i]" class="form-control address">
            </div>
            <div class="form-group col-md-4 pl-0 mt-1 mb-1">
                <input asp-for="Urls[i]" value="@Model.Urls[i]" class="form-control url" readonly>
            </div>
            <div class="col-auto align-self-center">
                <button type="button" class="btn btn-outline-danger btn-sm xbutton remove-connectaddress-button"><span data-feather="x"></span></button>
            </div>
        </div>
    }
    <button type="button" id="add-connectaddress-button" class="btn btn-outline-primary btn-sm mt-2 mb-4"><span data-feather="plus"></span> Add</button>
    <div class="form-row">
        <div class="form-group col-md-3">
            <label asp-for="UseSSL"></label>
            <select asp-for="UseSSL" class="form-control form-control-sm">
                <option>False</option>
                <option>True</option>
            </select>
        </div>
        <div class="form-group col-md-3 cert-div" hidden>
            <label for="SSLCertificateFile">SSLCertificate</label>
            <input id="SSLCertificateFile" name="SSLCertificateFile" class="form-control-file" type="file">
            <input asp-for="SSLCertificate" class="form-control file-filler" type="hidden" disabled>
        </div>
        <div class="form-group col-md-6 cert-div" hidden>
            <label asp-for="SSLCertificatePassword"></label>
            <input asp-for="SSLCertificatePassword" class="form-control form-control-sm">
        </div>
    </div>
    <div class="form-group">
        <label asp-for="ProfileId">HttpProfile</label>
        <select asp-for="ProfileId" class="form-control">
            @foreach (var item in Profiles)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>
    </div>
    <button id="submit-listener-button" type="button" class="btn btn-primary"><span data-feather="plus"></span> Create</button>
</form>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            var addAddress = function () {
                var num = $(".address-row").length;
                var newitem = '<div class="d-flex flex-row address-row">' +
                              '    <div class="form-group col-md-4 pl-0 mt-1 mb-1">' +
                              '        <input id="ConnectAddresses_' + num + '_" name="ConnectAddresses[' + num + ']" class="form-control address">' +
                              '    </div>' +
                              '    <div class="form-group col-md-4 pl-0 mt-1 mb-1">' +
                              '        <input id="Urls_' + num + '_" name="Urls[' + num + ']" class="form-control url" readonly>' +
                              '    </div>' +
                              '    <div class="col-auto align-self-center">' +
                              '        <button type="button" class="btn btn-outline-danger btn-sm xbutton remove-connectaddress-button"><span data-feather="x"></span></button>' +
                              '    </div>' +
                              '</div>';
                $(this).before(newitem);
                feather.replace();
                $(this).prev().find("button").click(removeAddress);
                $(".address").change(setUrl);
            }

            var removeAddress = function () {
                var row = $(this).parent().parent();
                var num = row.find("input").attr("id").replace("ConnectAddresses_", "").replace("_", "");
                $(".address-row").each(function()
                {
                    var currNum = $(this).find("input").attr("id").replace("ConnectAddresses_", "").replace("_", "");
                    if (parseInt(currNum) > parseInt(num)) {
                        $(this).find("input.address").attr("id", "ConnectAddresses_" + (parseInt(currNum) - 1) + "_");
                        $(this).find("input.address").attr("name", "ConnectAddresses[" + (parseInt(currNum) - 1) + "]");
                        $(this).find("input.url").attr("id", "Urls_" + (parseInt(currNum) - 1) + "_");
                        $(this).find("input.url").attr("name", "Urls[" + (parseInt(currNum) - 1) + "]");
                    }
                });
                row.remove();
            }

            $('#submit-listener-button').click(function () {
                var filecontrol = $("input.form-control-file")[0];
                var file = filecontrol.files[0];
                if (file == undefined)
                {
                    $("#submit-listener-form").submit();
                }
                else
                {
                    var fr = new FileReader();
                    fr.onload = receivedFileBuffer;
                    fr.readAsDataURL(file);
                }
                function receivedFileBuffer() {
                    $("input.file-filler").val(fr.result.split(",").pop()).prop("disabled", false);
                    $("input.form-control-file").prop("disabled", true);
                    $("#submit-listener-form").submit();
                }
            });
            var useSSL = "False";
            function swapOptions() {
                useSSL = $("#UseSSL").children("option:selected").text();
                if (useSSL.includes("False"))
                {
                    $(".cert-div").attr("hidden", "true");
                }
                else if (useSSL.includes("True"))
                {
                    $(".cert-div").removeAttr("hidden");
                }
                setUrl();
            };
            function setUrl() {
                var connectAddress = $("#ConnectAddress").val();
                var connectPort = $("#ConnectPort").val();
                var protocol = "http://";
                if (useSSL.includes("True"))
                {
                    protocol = "https://"
                }
                $(".address").each(function() {
                    var connectaddress = $(this).val();
                    $($(this).parent().next().children("input")[0]).val(protocol + connectaddress + ":" + connectPort);
                });
            }
            $("#UseSSL").change(swapOptions);
            $(".address").change(setUrl);
            $("#ConnectPort").change(setUrl);

            $('#add-connectaddress-button').click(addAddress);
            $('.remove-connectaddress-button').click(removeAddress);

            swapOptions();
            setUrl();
        });
    </script>
}
